<template>
    <div>
        <div style="padding: 10px;">

            <!--            搜索区域-->
            <div style="margin:10px 0;">
                <el-input v-model="search"  placeholder="请输入关键字" style="width: 20%;" clearable/>
                <el-button type="primary" style="margin-left: 5px;" @click="load"> 查询</el-button>
                <el-button type="primary" style="margin-left: 5px;" @click="add"> 添加</el-button>
                <el-upload :action="'http://' + serverIp + ':9090/student/import'"
                           :show-file-list="false"
                           accept=".xlsx"
                           :on-error="handleExcelImportError"
                           :on-success="handleExcelImportSuccess" style="display: inline-block">
                    <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
                </el-upload>
                <el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%;"
                    stripe
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="80" style="display: none;"></el-table-column>
                <el-table-column prop="studentId" label="学号" width="140"></el-table-column>
                <el-table-column prop="studentName" label="姓名"></el-table-column>
<!--                <el-table-column prop="studentPassword" label="密码"></el-table-column>-->
                <el-table-column prop="studentSex" label="性别"></el-table-column>
                <el-table-column prop="studentTel" label="联系电话"></el-table-column>
                <el-table-column prop="useStatus" label="使用状态">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.useStatus === '1'">启用</el-tag>
                        <el-tag type="warning" v-if="scope.row.useStatus === '0'">禁用</el-tag>
                    </template>
                </el-table-column>
<!--                <el-table-column prop="majorId" label="专业ID"></el-table-column>-->
                <el-table-column prop="collegeName" label="学院名"></el-table-column>
                <el-table-column prop="majorName" label="专业名称"></el-table-column>

                <!--操作-->
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                        ><i class="el-icon-edit-outline"></i> 编辑
                        </el-button>

                        <el-popconfirm
                                class="ml-5"
                                confirm-button-text='确定'
                                cancel-button-text='我再想想'
                                icon="el-icon-info"
                                icon-color="red"
                                title="您确定删除吗？"
                                @confirm="handleDelete(scope.$index,scope.row)"
                        >
                            <el-button type="danger" size="small" slot="reference"><i
                                    class="el-icon-remove-outline"></i> 删除
                            </el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
            <!--            分页栏-->
            <div style="margin: 10px 0;">
                <el-pagination
                        v-model:pageNum="pageNum"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                >
                </el-pagination>

                <!--添加与修改的表单-->
                <el-dialog title="学生信息" :visible.sync="dialogVisible" width="30%">
                    <el-form label-width="80px" size="small" :rules="rules" :model="form" ref="form">
                        <el-form-item label="ID" style="display: none">
                            <el-input v-model="form.id" autocomplete="off" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="学号" prop="studentId">
                            <el-input v-model="form.studentId" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="studentName">
                            <el-input v-model="form.studentName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="studentPassword">
                            <el-input v-model="form.studentPassword" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="studentSex">
                            <el-input v-model="form.studentSex" autocomplete="off"></el-input>
                            <el-option
                                    v-for="item in sexs"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-form-item>
                        <el-form-item label="联系电话" prop="studentTel">
                            <el-input v-model="form.studentTel" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="使用状态" style="display: none;">
                            <el-switch
                                    v-model="form.useStatus"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-value="1"
                                    inactive-value="0">
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="学院名" prop="collegeId">
                            <el-select clearable filterable v-model="form.collegeId" placeholder="请选择" @change="collegeChange">
                                <el-option v-for="item in college" :key="item.collegeId" :label="item.collegeName" :value="item.collegeId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专业名称" prop="majorId">
                            <el-select clearable v-model="form.majorId" placeholder="请选择" >
                                <el-option v-for="item in major" :key="item.majorId" :label="item.majorName" :value="item.majorId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="save">确 定</el-button>
                    </div>
                </el-dialog>
            </div>

        </div>
    </div>
</template>

<script>

    import request from "../utils/request";
    import {serverIp} from "../../public/config";

    export default {
        name: 'Student',
        components: {},
        data() {
            return {
                form: {},
                roles: {},
                serverIp: serverIp,
                dialogVisible: false,
                search: '',
                pageSize: 5,
                pageNum: 1,
                total: 20,
                tableData: [],
                college:[],
                major:[],
                sexs:[{value:'男',label:'男'},{value:'女',label:'女'}],
                status: [{name: "启用", value: "1"}, {name: "禁用", value: "0"}],
                rules: {
                    studentId: [
                        {required: true, message: '请输入用戶ID', trigger: 'blur'},
                        {min: 13, max: 13, message: '长度13个字符', trigger: 'blur'}
                    ],
                    studentName: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度2-10个字符', trigger: 'blur'}
                    ],
                    studentPassword: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 20, message: '长度6-20个字符', trigger: 'blur'}
                    ],
                    studentSex: [
                        {required: true, message: '请输入性别', trigger: 'blur'}
                    ],
                    studentTel: [
                        {required: true, message: '请输入联系电话', trigger: 'blur'}
                    ],
                    collegeId: [
                        {required: true, message: '请选择学院', trigger: 'blur'},
                    ],
                    majorId: [
                        {required: true, message: '请选择专业', trigger: 'blur'},
                    ]




                }
            }
        },
        created() {
            this.load()
        },
        methods: {
            load() {
                var mess = this;
                // get方法需要params，post不要 "http://localhost:9090/student"
                request.get("/student", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        studentName: this.search,
                    }
                }).then(res => {
                    console.log("res:", res);
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
                //请求学院数据
                request.get("/college/findAll").then(res => {
                    console.log("res:", res);
                    this.college = res.data
                })
            },
            add() {
                this.form = {};
                this.form.useStatus = "1"; //初始化使用状态
                this.major =[];//学院还没选，清空专业多选框
                this.dialogVisible = true;
            },
            save() {
                if(this.form.majorId ==="" || this.form.majorId ==null){
                    this.$message.info("专业为空")
                    return ;
                }
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        request.post("/student/save", this.form).then(res => {
                            console.log("code:", res.code)
                            if (res.code == '200') {
                                this.$message.success(res.data)
                            } else {
                                this.$message.error(res.data)
                            }
                            this.load() //刷新表格
                            this.dialogVisible = false
                            console.log("success")
                        }).catch(err => {
                            this.$message.error(err);
                        })
                    } else {
                        this.$message.info("请填写完表单")
                        return false;
                    }
                });

            },
            handleEdit(index, row) {
                this.form = JSON.parse(JSON.stringify(row))
                this.getMajor();
                this.dialogVisible = true
                console.log(row)
            },
            handleDelete(index, row) {
                console.log(row.id)
                //注意url/{路径}/
                this.request.delete("/student/delete/" + row.id).then(res => {
                    console.log(res)
                    if (res.data === true) {
                        this.$message.success("删除成功")
                        this.load()
                    } else {
                        this.$message.error("删除失败")
                    }
                })

            },
            handleSizeChange(pageSize) { //改变当前每页的个数触发
                this.pageSize = pageSize
                console.log(pageSize)
                this.load()
            },
            handleCurrentChange(pageNum) {  //改变当前页码触发
                this.pageNum = pageNum
                this.load()
            },
            exp() {
                window.open(`http://${serverIp}:9090/student/export` + "?studentName="+this.search)


            },
            handleExcelImportSuccess() {
                this.$message.success("导入成功")
                this.load()
            },
            handleExcelImportError() {
                this.$message.success("导入失败")
            },
            getMajor(){
                //根据学院id加载专业数据
                console.log("id", this.form.collegeId)
                if(this.form.collegeId === ""){
                    return;
                }
                request.get("/major/selectByCollegeId/" + this.form.collegeId,).then(res => {
                    console.log("major:", res);
                    this.major = res.data

                })
            },
            collegeChange(){
                //根据学院id更改，重新加载专业数据
                // this.form.majorId= ""; //选取第一个

                this.getMajor();
            }


        }

    }
</script>
